﻿@using xConnected.Common.ExpertProfile
@{
    ViewBag.Title = "AdvancedSearch";
}
<hr />
<div class="breadcrumb" style="margin-top: 20px">
    <div class="row-fluid">
        <button class="btn btn-info pull-right" data-bind="click: function(){ $root.company.resetAdvancedSearch() }">Reset search</button>
    </div>
</div>
<div data-bind="with: company">
    <div  data-bind = "with: companyAdvancedSearch">
        <hr/>
        <div class="row">
            <span class="span1"><strong>Search type</strong></span>
            <select class="span3" style="margin-left: 28px; width: 283px" data-bind="value: $root.company.searchType">
                <option value="all">Match all criteria</option>
                <option value="some">Match any criteria</option>
            </select>
        </div>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>@Resources.Keywords</strong></div>
    <div class="input-append span10" style="height: 25px; max-height: 50px">
        <div class="thumbnail span9" style="height: 100%; width: 1030px; margin-left: 0px;">
            <span data-bind="foreach: $root.company.keywordTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.company.removeKeywordTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="keywordsCompaniesAutocomplete" data-bind="value: $root.company.keyword, valueUpdate: 'afterkeydown', executeOnEnter: $root.company.addKeywordTag" style="border: none; box-shadow: none;" type="text"/>
        </div>
    </div>
</div>
<hr/>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Countries</strong></div>
    <div class="input-append span10" style="height: 25px; max-height: 50px">
        <div class="thumbnail span9" style="height: 100%; width: 1000px; margin-left: 0px;">
            <span data-bind="foreach: $root.company.countryTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.company.removeCountryTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="countriesCompaniesAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.company.showAllCountries(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div data-bind="with: company">
    <div  data-bind = "with: companyAdvancedSearch">
        <div class="row">
            <span class="span1"><strong>@Resources.Location</strong></span>
            <input class="span3" type="text" data-bind="value: Location" style="margin-left: 28px; width: 283px"/>
        </div>
    </div>
</div>
<hr/>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Industries</strong></div>
    <div class="input-append span10" style="height: 25px; max-height: 50px">
        <div class="thumbnail span9" style="height: 100%; width: 1000px; margin-left: 0px;">
            <span data-bind="foreach: $root.company.industryTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.company.removeIndustryTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="industriesCompaniesAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.company.showAllIndustries(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Categories</strong></div>
    <div class="input-append span10" style="height: 25px; max-height: 50px">
        <div class="thumbnail span9" style="height: 100%; width: 1000px; margin-left: 0px;">
            <span data-bind="foreach: $root.company.categoryTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.company.removeCategoryTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="categoriesCompaniesAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.company.showAllCategories(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Technologies</strong></div>
    <div class="input-append span10" style="height: 25px; max-height: 50px">
        <div class="thumbnail span9" style="height: 100%; width: 1000px; margin-left: 0px;">
            <span data-bind="foreach: $root.company.technologyTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.company.removeTechnologyTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="technologiesCompaniesAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.company.showAllTechnologies(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<hr/>
<div class="breadcrumb" style="margin-top: 20px">
    <div class="row-fluid">
        <button class="btn btn-info pull-right" data-bind="click: function(){ $root.company.search() }"><strong>Search</strong></button>
    </div>
</div>